<script setup name="charge">
import { OPTIONS_LIST } from '@/global/const'
import PopupDialog from "@/global/components/popupDialog/PopupDialog.vue";
import { useWalletData } from './hooks/useWalletData'
const { chargeData,popupRef ,chargeWallet} = useWalletData()
const handleCharge = () => {
  chargeData.password = ''
  popupRef.value?.open()
}
</script>

<template>
  <view class="charge-container">
    <uni-card>
      <view class="box"
            @click="chargeData.balance = option.value"
            :class="{ 'selected-box': chargeData.balance === option.value }"
            v-for="option in OPTIONS_LIST"
            :key="option.value">{{ option.label }}</view>
    </uni-card>

    <up-button @click=" handleCharge" class="payBtn" round type="primary">支 付</up-button>

    <popup-dialog :confirm="chargeWallet" title="请输入登录密码" ref="popupRef" >
      <template #default>
        <up-input
            clearable
            placeholder="请输入密码"
            border="surround"
            type="password"
            v-model="chargeData.password"
        />
      </template>
    </popup-dialog>

  </view>
</template>

<style scoped lang="scss">
uni-page-body {
  background-color: $u-primary-light;
  padding: 10rpx 20rpx 20rpx 20rpx;
  height: 100%;
}
:deep(.uni-page-head-btn) {
  display: block !important;
}
:deep(.uni-card) {
  margin: unset !important;
  padding: unset !important;
  width: 100%;
  .uni-card__content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25rpx;
    .box {
      height: 120rpx;
      border: 1px solid $u-primary;
      line-height: 120rpx;
      text-align: center;
      border-radius: 25rpx;
      font-size: 40rpx;
      font-weight: bold;
    }
    .selected-box {
      background-color: $u-primary;
      color: $u-bg-color;
    }
  }
}
.payBtn {
  margin-top: 25rpx;
  border-radius: 35rpx;
  background-color: $u-primary;
  border: none;
  font-weight: bold;
}
</style>
